@import './color';
%underline-from-center {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    box-shadow: 0 0 1px transparent;
    position: relative;
    overflow: hidden;
    &:before {
        content: '';
        position: absolute;
        z-index: -1;
        height: 2px;
        bottom: 0;
        left: 50%;
        right: 50%;
        background: $blog-main-color;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: right,left;
        transition-property: right,left;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    &:active,
    &:focus,
    &:hover {
        &:before {
            right: 0;
            left: 0;
        }
    }
}

%pulse {
    @keyframes hvr-pulse {
        to {
            transform: scale(1.1);
        }
    }
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    box-shadow: 0 0 1px transparent;
    -webkit-animation-name: hvr-pulse;
    animation-name: hvr-pulse;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
